<template>
  <div class="lottery1">
    <div class="title">
      <img src="../assets/lottery1/title.webp" alt="title"/>
    </div>
    <div class="money">
      <div class="info">{{user.name}}，余额：{{user.points}}积分</div>
      <div class="buttons">
        <div class="button" @click="jfcz">充值</div>
        <div class="button" @click="jfzx">提现</div>
        <div class="button" @click="logout">退出</div>
      </div>
    </div>
    <LuckyWheel class="lottery"
                ref="myLucky"
                width="80vw"
                height="80vw"
                :range="range"
                :prizes="prizes"
                :blocks="blocks"
                :buttons="buttons"
                @start="startCallback"
                @end="endCallback"
    />
    <div class="bottom_info">
      <p>已有 <span class="shadow">{{participants}}</span> 人参与</p>
      <p>每次抽奖消耗50积分</p>
    </div>
<!--    <div class="other_prize card">-->
<!--      <div class="title"></div>-->
<!--    </div>-->
    <div class="my_prize card">
      <div class="title"><img src="../assets/lottery1/myPrize.png" alt="myPrize" /> 我的奖品</div>
      <div class="body">
        <div v-if="user.awards.length === 0" class="no_prize">
          <img src="../assets/lottery1/noPrize.png" alt="noPrize"/>
          <p>暂无中奖记录</p>
        </div>
        <div v-else class="awards">
          <div v-for="award in user.awards" class="award">
            <div><img src="../assets/lottery1/award.png" alt="award"/></div>
            <div class="info">
              <div>{{award.info}}</div>
              <div>{{award.time}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot"></div>
    <div class="login" v-show="showLogin">
      <div class="body">
        <div class="title">TCY</div>
        <div class="an">
          <div class="text">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-user"></use>
            </svg>
          </div>
          <input type="text" placeholder="请输入账号" v-model="login.mobile" />
        </div>
        <div class="an">
          <div class="text">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-key"></use>
            </svg>
          </div>
          <input type="password" placeholder="请输入密码" v-model="login.password" />
        </div>
        <div class="an anButton" @click="login2">
          登录
        </div>
      </div>
    </div>

    <div class="msg" v-show="showMsg">{{msg}}</div>


  </div>
</template>

<script>
export default {
  name: "Lottery1",
  created() {
    // this.$nextTick(function () {
    //
    // });
    let token = localStorage.getItem('token')
    if (token) {
      this.setToken(token)
    }
    this.showLottery(1);
  },
  data() {
    return {
      login: {
        mobile: '',
        password: '',
      },
      tokenConfig: '',
      user: {
        name: '未登录',
        points: 0,
        awards: [],
      },
      showLogin: true,
      showMsg: false,
      lastShowMsgTimeout: 0,
      msg: '',
      participants: 12334,
      blocks: [
        {padding: '4px', background: '#fdc258'},
        {padding: '8px', background: '#ffe8a4'},
        {padding: '6px', background: '#fed97d'},
      ],
      range: [],
      prizes: [],
      buttons: [
        {radius: '50px', background: '#f57516'},
        {radius: '45px', background: '#fee2a1', pointer: true,},
        {
          radius: '40px', background: '#fe7104',
          pointer: true,
          fonts: [{text: '开始\n抽奖', top: '-20px', fontColor: 'white'}]
        },
      ],
    }
  },
  methods: {
    jfzx() {
      this.showMsgF('请联系客服提现')
    },
    jfcz() {
      this.showMsgF('请联系客服充值')
    },
    async setToken(token) {
      this.showLogin = false
      this.tokenConfig = {headers: {'Token': token}}
      await this.getUserInfo()
      this.getMyAward()
    },
    logout() {
      localStorage.removeItem('token')
      this.showLogin = true
      this.tokenConfig = null
      this.user.awards = []
      this.user.name = '未登录'
      this.user.points = 0
    },
    showMsgF(msg) {
      if (this.showMsg) {
        clearTimeout(this.lastShowMsgTimeout)
        this.showMsg = false
        setTimeout(() => {
          this.showMsgF(msg)
        }, 100)
        return
      }
      this.msg = msg;
      this.showMsg = true
      this.lastShowMsgTimeout = setTimeout(() => {
        this.showMsg = false
      }, 2000)
    },
    async getUserInfo() {
      let res = await this.axios.get('/user', this.tokenConfig)
      let data = res.data
      if (data.code !== 200) {
        this.showMsgF(data.msg)
        return
      }
      this.user.name = data['nickname'];
      this.user.points = data['points']
    },
    getMyAward() {
      this.axios.get('/myAward?type=1', this.tokenConfig).then(res => {
        if (res.data.code !== 200) {
          this.showMsgF(res.data.msg)
          return
        }
        this.user.awards = res.data.awards
      })
    },
    async login2() {
      let res = await this.axios.post('/login', this.login, {headers: {'Content-Type': 'application/json'}})
      let data = res.data
      if (data.code !== 200) {
        this.showMsgF(data.msg)
        return
      }
      localStorage.setItem('token', data.token);
      await this.setToken(data.token)
      if (data.award) {
        console.log('有奖励')
      }
    },
    async showLottery(type) {
      let res = await this.axios.get('/lottery?type=' + type)
      let data = res.data
      if (data.code !== 200) {
        this.showMsgF(data.msg)
        return
      }
      let prizes = data.prizes
      this.range = data.range
      let backgrounds = ['#ff6503', '#ff7e1b']
      let backgroundsFlag = true
      for (let prize of prizes) {
        let temp = {
          fonts: [{ text: prize, top: '20%', fontColor: 'white', }],
          background: backgrounds[backgroundsFlag ? 0 : 1],
        }
        if (prize.length > 5) {
          temp['fonts'][0]['fontSize'] = '15px'
        }
        backgroundsFlag = !backgroundsFlag
        this.prizes.push(temp)
      }
    },
    startCallback() {
      this.$refs.myLucky.play()
      this.axios.post('/lottery?type=1', {}, this.tokenConfig).then(res => {
        if (res.data.code !== 200) {
          this.showMsgF(res.data.msg)
          this.$refs.myLucky.stop()
          return
        }
        this.user.points = res.data.points
        this.$refs.myLucky.stop(res.data.index)
      })
    },
    endCallback(prize) {
      this.getUserInfo()
      this.getMyAward()
    },
  }
}
</script>

<style scoped>
.lottery1 {
  background-image: url(../assets/lottery1/background.webp);
  background-repeat: no-repeat;
  background-size: 100vw;
  background-color: rgb(228, 15, 19);
  min-height: 100vh;
}

.title > img {
  width: 100vw;
}

.money {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 20px;
  color: white;
  font-size: 0.8rem;
}

.money > .info {
  line-height: 26px;
}

.button {
  background-color: #ffd100;
  color: #5a5541;
  line-height: 20px;
  padding: 3px 6px;
  border-radius: 10px;
}

.buttons {
  display: flex;
}

.buttons .button {
  margin-left: 5px;
}

.lottery {
  margin: 0 auto;
}

.bottom_info {
  margin: 10px 0;
  color: white;
  font-size: 0.8rem;
  text-align: center;
}

.bottom_info > p {
  margin: 2px 0;
}

.bottom_info > p > .shadow {
  color: rgb(255, 62, 7);
  text-shadow:
      rgb(255 236 168) -1px -1px 0,
      rgb(255 236 168) 0 -1px 0,
      rgb(255 236 168) 1px -1px 0,
      rgb(255 236 168) 1px 0 0,
      rgb(255 236 168) 1px 1px 0,
      rgb(255 236 168) 0 1px 0,
      rgb(255 236 168) -1px 1px 0,
      rgb(255 236 168) -1px 0 0;
}

.card {
  min-height: 100px;
  background-color: white;
  margin: 10px 20px;
  border-radius: 20px;
}

.card > .title {
  padding: 10px;
}

.card > .title > img {
  width: 15px;
}

.my_prize .no_prize {
  text-align: center;
  padding-bottom: 20px;
}

.my_prize .awards {
  display: flex;
  flex-direction: column;
}

.my_prize .awards .award {
  display: flex;
  margin: 10px 0 0 20px;
}

.my_prize .awards .award > div.info > div {
  margin-bottom: 5px;
}

.my_prize .awards img {
  width: 70px;
}

.foot {
  height: 50px;
}

.login {
  position: fixed;
  z-index: 111;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #000000ad;
}

.msg {
  position: fixed;
  z-index: 111;
  top: 50vh;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: white;
  margin-top: -20px;
  right: 20px;
  left: 20px;
  background-color: #fd4c33;
  border: #ffe8a4 5px solid;

}

.login > .body {
  background-image: url(../assets/lottery1/login.webp);
  background-size: 100vw;
  position: fixed;
  top: 50%;
  height: 500px;
  margin-top: -250px;
  bottom: 20vh;
  right: 15px;
  left: 15px;
  border-radius: 20px;
  padding: 30px;
}

.login .title {
  text-align: center;
  color: white;
  font-size: 4rem;
  margin: 40px;
}

.login .an {
  margin: 0 auto 20px;
  width: 80%;
  height: 50px;
  background-color: #8b282cba;
  border-radius: 25px;
  display: flex;
}

.login .an .text {
  line-height: 50px;
  margin-left: 20px;
  color: #dbc6bc;
}

.login .an input {
  border: none;
  outline: medium;
  height: 40px;
  margin: 4px 10px;
  width: 100%;
  background: none;
  color: white;
}

.login .an.anButton {
  background-color: #f96331;
  color: white;
  line-height: 50px;
  text-align: center;
  display: block;
  font-size: 1.5rem;
}

.login .an input::placeholder{
  color: #dbc6bc;
}

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

</style>